<template>
  <div class="restaurantInfo">
    <top></top>
    <div class="foodInfo1">
      <div class="foodInfo2">
        <div class="foodInfo3">
          <div class="foodInfo5">
            {{info.name}}
          </div>
          <div class="foodInfo6">
            {{info.address}}
          </div>
          <div class="foodInfo6">
            营业时间:{{info.open}}
          </div>
        </div>
        <div class="foodInfo4">
          <div id="mapContainer" style="width: 300px; height: 180px;border-radius:5px;margin-right:10px">

          </div>
          <el-image 
            style="width: 300px; height: 180px;border-radius:5px"
            :src="url" 
            :preview-src-list="srcList">
          </el-image>
        </div>
      </div>
    </div>
    <div class="cinemaInfo8">
        <div class="cinemaInfo9">
            <div class="cinemaInfo10">
                美食分享
            </div>
            <el-empty v-if="food.length <= 0" style="font-family:'黑体';width:100%" description="暂无数据"></el-empty>
            <div v-if="food.length > 0" class="cinemaInfo11" v-for="(item,index) in food" :key="index">
                <div class="cinemaInfo12">
                    <img :src="item.image.split(',')[0]">
                </div>
                <div class="cinemaInfo13">
                    <div class="cinemaInfo14">
                        <div class="cinemaInfo15">
                            <div>{{item.name}}{{item.score}}</div>
                            <div class="cinemaInfo16" @click="toInfo(item.id)">查看详情></div>
                        </div>
                        <div class="cinemaInfo17">
                            <div class="cinemaInfo18">
                                地址：{{item.address}}
                            </div>
                            <div class="cinemaInfo18">
                                营业时间：{{item.open}}
                            </div>
                            <div class="cinemaInfo18">
                                类型：{{item.typeId}}
                            </div>
                            <div class="cinemaInfo18">
                                发表用户：{{item.createBy}}
                            </div>
                            <div class="cinemaInfo18">
                                <el-rate
                                v-model="item.star"
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                              </el-rate>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import {getFoodRestaurantById,getFoodListByRestId} from '../../api/api'
  import top from '@/components/top'
  import bottom from '@/components/bottom'
  export default {
    data() {
      return{
        id: "",
        info: {},
        url: '',
        srcList: [],
        food: [],
      }
    },
    components: {
        top,
        bottom,
    },
    methods: {
      toInfo(id) {
        this.$router.push("/foodInfo?id=" + id)
      },
      getFoodRestaurantById() {
        getFoodRestaurantById({id: this.id}).then(res => {
          if (res.code == 1000) {
            this.info = res.data
            var image = res.data.image.split(',')
            this.url = image[0]
            this.srcList = image
            var scale = this.info.geography.split(",")
            this.getMap(scale[0],scale[1])
          }
        })
      },
      getMap(lat,lon) {
          this.map = new AMap.Map('mapContainer', {
              zoom:11,
              center: [lat, lon],
              viewMode:'3D',
          });
          this.markPoints(lat,lon)
      },
      markPoints(lat,lon) {
          const marker = new AMap.Marker({
              position: new AMap.LngLat(lat, lon), // 经纬度
              map: this.map,
              offset: new AMap.Pixel(-0.5,-16), // 设置偏移量，负值向左上方偏移
              anchor: "center", // 设置标记点的锚点位置
          });
  
          // 将创建的点标记添加到已有的地图实例：
          this.map.add(marker);
          this.map.setFitView();
      },
      getFoodListByRestId() {
        getFoodListByRestId({restId: this.id}).then(res => {
          if (res.code == 1000) {
            this.food = res.data
          }
        })
      },
    },
    created() {
     
    },
    mounted() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
      this.id = this.$route.query.id
      this.getFoodRestaurantById()
      this.getFoodListByRestId()
    }
 }
</script>

<style scoped>
@import url('../../assets/css/restaurantInfo.css');
@import url('../../assets/css/foodInfo.css');
@import url('../../assets/css/cinemaInfo.css');
</style>